"use client";
import React, { KeyboardEvent, useEffect, useRef, useState } from "react";
import style from "./index.module.scss";
const Test = () => {
  const [pressKeys, setPressKeys] = useState<string[]>([]);
  const [count, setCount] = useState(0); //模拟localstorage中的按键使用次数
  const [isUsed, setIsUsed] = useState(false);
  let timer: any = null;

  const ref = useRef<any>(null);
  // const handleKeyDown = (e: KeyboardEvent) => {
  //   console.log(pressKeys);
  //   if (!pressKeys.includes(e.key)) {
  //     setPressKeys((preval) => preval + "+" + e.key);
  //   } else {
  //     setPressKeys(e.key);
  //   }

  //   // 使用原生KeyboardEvent
  //   if (pressKeys === "a+t" || pressKeys === "t") {
  //     count++;
  //     if (count == 1) {
  //       ref.current?.classList.add(style.keyboardFistTimePressed);
  //     } else if (count > 1) {
  //       ref.current?.classList.remove(
  //         style.keyboardFistTimePressed,
  //         style.keyboardPressed,
  //         style.keyboardUsed
  //       );
  //       ref.current?.classList.add(style.keyboardPressed);
  //     }
  //   }
  // };
  // const handleKeyUp = () => {
  //   setPressKeys("");
  //   if (count >= 1) {
  //     ref.current?.classList.remove(style.keyboardPressed, style.keyboardHeld);
  //     ref.current?.classList.add(style.keyboardUsed);
  //   }
  // };
  const shortcuts = [
    [
      {
        key: "a+t",
        label: ["a", "t"],
        count: 0,
      },
    ],
  ];
  useEffect(() => {
    localStorage.setItem("shortcuts", JSON.stringify(shortcuts));
  }, []);
  const handleKeyDown = (e: KeyboardEvent) => {
    if (!pressKeys.includes(e.key)) setPressKeys([...pressKeys, e.key]);
    //遍历localstorage中快捷键对象key，判断是否匹配
    const shortcuts = JSON.parse(localStorage.getItem("shortcuts") || "[]");
  
    for (let i = 0; i < shortcuts.length; i++) {
      for (let j = 0; j < shortcuts[0].length; j++) {
        if (shortcuts[i][j].key === pressKeys.join("+")) {
          //如果匹配，属性count++
          shortcuts[i][j].count++;
          console.log(shortcuts[i][j].count, "shortcuts[i][j].count");
          setCount(shortcuts[i][j].count);
          //setItem
          localStorage.setItem("shortcuts", JSON.stringify(shortcuts));
        }
      }
    }
  };

  const handleKeyUp = () => {
    // 清空当前弹起的键
    setPressKeys([]);
  };

  return (
    <div className={style.wrapper}>
      <div className={style.cnt}>
        <table>
          <tbody>
            <tr
              className={`${style.tr} 
              ${
                count === 1 && pressKeys.join("+") === "a+t" //{item.key}
                  ? style.keyboardFistTimePressed
                  : ""
              } 
              ${
                count > 1 && pressKeys.join("+") === "a+t"
                  ? style.keyboardPressed
                  : ""
              }
              ${isUsed ? style.keyboardUsed : ""}`}
              key={"a+t"}
              onKeyDown={handleKeyDown}
              onKeyUp={handleKeyUp}
              onAnimationEnd={() => {
                setIsUsed(true);
              }}
            >
              <td className={style.td}>
                <span className={`${style.binding}`} tabIndex={0} autoFocus>
                  a
                </span>
                <span className={`${style.binding} `} tabIndex={0} autoFocus>
                  T
                </span>
              </td>
            </tr>
            <tr className={style.tr}>
              <td className={style.td}>
                <span className={`${style.binding}`} tabIndex={0} autoFocus>
                  a
                </span>
                <span className={`${style.binding}`} tabIndex={0} autoFocus>
                  T
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};
export default Test;
